<template>
  <div class="province-data" :class="comPosition">
    <div class="province-title">{{ dialogData.name }}数据占全国详情</div>
    <div class="province-circle">
      <div class="circle-row">
        <div class="circle" id="circle0" ref="circle0"></div>
        <div class="circle-title">
          申请用户{{ dialogData.venture_submit_uv }}人
        </div>
      </div>
      <div class="circle-row">
        <div class="circle" id="circle1" ref="circle1"></div>
        <div class="circle-title">
          授信用户{{ dialogData.venture_pass_uv }}人
        </div>
      </div>
      <div class="circle-row">
        <div class="circle" id="circle2" ref="circle2"></div>
        <div class="circle-title">
          放款用户{{ dialogData.loan_success_uv }}人
        </div>
      </div>
      <div class="circle-row">
        <div class="circle" id="circle3" ref="circle3"></div>
        <div class="circle-title">在贷用户{{ dialogData.loan_repay_uv }}人</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import EchartsConfig from './pie'
@Component({
  name: 'province-data',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({
    default: () => {
      return {
        name: '',
        venture_submit_uv: 0,
        venture_submit_uv_percent: 0,
        venture_pass_uv: 0,
        venture_pass_uv_percent: 0,
        loan_success_uv: 0,
        loan_success_uv_percent: 0,
        loan_repay_uv: 0,
        loan_repay_uv_percent: 0
      }
    }
  })
  private dialogData!: any
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private positionConfig = {
    north: ['新疆', '内蒙古', '黑龙江', '吉林', '辽宁', '北京', '天津'],
    midNorth: [
      '青海',
      '甘肃',
      '宁夏',
      '陕西',
      '山西',
      '河北',
      '河南',
      '山东',
      '上海',
      '浙江',
      '福建'
    ],
    mid: ['西藏', '四川', '重庆', '湖北', '安徽', '江苏'],
    midSouth: ['贵州', '湖南', '江西', '云南'],
    south: ['广西', '广东', '香港', '澳门', '海南', '台湾']
  }
  get comPosition() {
    //computed 属性
    return this.getPosition(this.dialogData.name)
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
    if (this.dialogData.name) {
      this.setAllOption()
    }
  }
  @Watch('dialogData')
  private ondialogDataChange(val: any) {
    this.setAllOption()
  }
  private methodExp() {
    // method创建地方
  }
  private setAllOption() {
    this.$nextTick(() => {
      if (this.$refs.circle0) {
        let chart = new EchartsConfig('circle0')
        chart.setOption({
          value: this.dialogData.venture_submit_uv_percent
        })
      }
      if (this.$refs.circle1) {
        let chart = new EchartsConfig('circle1')
        chart.setOption({
          value: this.dialogData.venture_pass_uv_percent
        })
      }
      if (this.$refs.circle2) {
        let chart = new EchartsConfig('circle2')
        chart.setOption({
          value: this.dialogData.loan_success_uv_percent
        })
      }
      if (this.$refs.circle3) {
        let chart = new EchartsConfig('circle3')
        chart.setOption({
          value: this.dialogData.loan_repay_uv_percent
        })
      }
    })
  }
  private getPosition(province: string) {
    let tryGetPosition = (
      val: string,
      compare = (v: string, arr: any[]) => arr.includes(v)
    ) => {
      return Object.keys(this.positionConfig).find(k =>
        compare(val, (this.positionConfig as any)[k])
      )
    }
    let position = tryGetPosition(province)
    if (position) {
      return position
    } else {
      return 'default'
    }
  }
}
</script>

<style lang="scss" scoped>
.province-data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.02em;
  height: 1.98em;
  background: url('./../../../../assets/dashboard/map-dialog.png') no-repeat
    center;
  background-size: cover;
  transition: all 0.5s linear;

  .province-title {
    margin-top: 1.78em;
    text-align: center;
    font-size: 0.18em;
    color: #fff;
  }
  .province-circle {
    margin-top: 0.2em;
    width: 100%;
    height: 0.85em;
    padding: 0 0.4em;
    display: flex;
    justify-content: space-between;
    .circle-row {
      height: 0.85em;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .circle {
        height: 0.55em;
        width: 0.55em;
      }
      .circle-title {
        font-size: 0.14em;
        color: #fff;
      }
    }
  }
}
.default {
  top: 50%;
}
.north {
  top: 60%;
  left: 55%;
}
.midNorth {
  top: 70%;
}
.mid {
  top: 45%;
}
.midSouth {
  top: 55%;
}
.south {
  top: 63%;
}
</style>
